<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const mapContainer = ref<HTMLDivElement | null>(null)
let map: L.Map | null = null

onMounted(async () => {
  if (map) return
  // 湖北省大致经纬度边界
  const hubeiBounds = L.latLngBounds(
    [29.0, 108.2], // 西南角（纬度, 经度）
    [33.6, 116.2]  // 东北角（纬度, 经度）
  )
  map = L.map(mapContainer.value as HTMLDivElement, {
    center: [30.9756, 112.2707], // 湖北省中心
    zoom: 7,
    minZoom: 5,
    maxZoom: 18,
    zoomControl: true,
    maxBounds: hubeiBounds, // 限制可视区域
    maxBoundsViscosity: 1.0 // 边界粘性，1为完全不能拖出
  })

  // 加载在线 OSM 瓦片
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  // 加载湖北县级边界 geojson
  fetch('/hubei-county.geojson')
    .then(res => res.json())
    .then(geojson => {
      L.geoJSON(geojson, {
        style: {
          color: '#d00',
          weight: 2,
          fill: false
        }
      }).addTo(map)
    })

  // 加载路线 geojson
  fetch('/route.geojson')
    .then(res => res.json())
    .then(geojson => {
      L.geoJSON(geojson, {
        style: {
          color: '#0078ff',
          weight: 4
        }
      }).addTo(map)
    })
})
</script>

<style scoped>
.map-container {
  width: 100vw;
  height: 100vh;
}
</style> 